<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="/headfirst_js/debug/debug.js"></script>
<script>
	var debug;
	//수평방향위치
	function getX(e){
		if(!e){                //익스플로러 처리
			e=fixEvent(e);
		}
		return e.pageX ;  
	}
	
	//수직방향위치
	function getY(e){
		if(!e){
			e=fixEvent(e);
		}
		return e.pageY;
	}
	
	function targetX(e){
		if(!e){
			e=fixEvent(e);
		}
		return e.layerX;
	}
	
	function targetY(e){
		if(!e){
			e=fixEvent(e);
		}
		return e.layerY;
	}
	
	function fixEvent(e){
		if(!e){
			e=window.event;
			e.target = e.srElement;
			e.layerX=e.offsetX;
			e.layerY=e.offsetY;
			e.pageX=e.clientX;
			e.pageY=e.clientY;
		}	
		return e;
	}
	
	function preventStop(e){
		if(e.preventDefault)
			e.preventDefault();
		else
			window.event.returnValue=false;
		
		return false;
	}
	
	function relatedTarget(elem){
		for(var i =0;i<elem.length;i++){
			elem[i].onmouseover = function(e){
				if(e.relatedTarget==this.parentNode){
					this.lastChild.style="display:block";
				}
			};
		}
		
	}
	
	function chkCtrlKey(e){
		if(!e)
			e=fixEvent(e);
		
		if(e.ctrlKey){     //e.shiftKey
			alert("press ctrlkey");
		}
	}
	function chkKeypress(e){
		if(!e)
			e=fixEvent(e);
		alert(e.keyCode);
	}
	window.onload=function(e){
		debug = new DebugConsole();
		document.onclick=function(e){
			/* if(!e)
				e = fixEvent(e);
			if(e.button==2){
				return preventStop(e);
				
			} */
			chkCtrlKey(e);
			debug.displayMsg("getX:"+getX(e)+" getY:"+getY(e) );
		}
		document.getElementById("name").onkeypress=function(e){
			chkKeypress(e);
		}
		document.getElementById("cont").onclick=function(e){
			debug.displayMsg("targetX:"+targetX(e)+" targetY:"+targetY(e));
		}
		
		var li = document.getElementsByTagName("li");
		relatedTarget(li);
		
	}
	
	window.onbeforeunload=function(e){    //onunload와 비슷하지만 사용자에게 메세지 전달이 가능하다.
		return "your data will not be saved.";		
	};
	window.onunload = function(e){
		alert("bye~~~");
	}
</script>
</head>
<body>
	<div style="width: 300px;height: 300px;background-color: yellow" id="cont"></div> <br>
	<ol>
		<li>Hello<ol style="display:none">
				<li>Another</li>
				<li>Item</li>
			</ol></li>
		<li>Test<ol  style="display:none">
				<li>More</li>
				<li>Items</li>
			</ol></li>
	</ol>
	<input type="text" id="name">
</body>
</html>